
<template>
<!-- 订单详情 -->
  <div class="OrderDetail">
   
 <div class="side_1">
 </div>
      <span class="add_1">
  订单详情
 </span>
 <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
   <div class="body">
    
        <div class="form_pro">
         <el-form :inline="true" :model="formInlines" class="demo-form-inline" label-width="100px">
                <el-form-item label="订单编号" >
              <el-input v-model="formInlines.saleorderno" ></el-input>
            </el-form-item>
              <!-- <el-form-item label="产品名称" style="width:23%">
              <el-input v-model="formInlines.productname"></el-input>
                         
            </el-form-item> -->
                 <el-form-item label="下单时间" >
              <el-input v-model="formInlines.xiadandate"></el-input>
                         
            </el-form-item>
         </el-form>
        </div>
         <div class="tt" v-for="(item,index) in datas" :key="index">
           <div class="form_pro_1">
     <el-form :inline="true" :model="item" class="demo-form-inline" label-width="100px">
        
          <el-form-item label="产品名称">
            <el-input v-model="item.productname" ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="item.productype"></el-input>
          </el-form-item>
          <el-form-item label="规格">
            <el-input v-model="item.guige"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="item.number"></el-input>
          </el-form-item>
        
        </el-form>
      </div>
  
        <div id="table">
            <!-- <el-table :data="tableData" border stripe>
          <el-table-column align="center" type="index" label="序号" prop="xuhao">
       
          </el-table-column>
          <el-table-column align="center" label=" 位置" >
              <template slot-scope="scope">
                   <el-input v-model="scope.row.lacation" ></el-input>
              </template>
           
          </el-table-column>
          <el-table-column align="center" label="BOM单号">
            <template slot-scope="scope">
           
              <el-input v-model="scope.row.No" ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="物料">
            <template slot-scope="scope">
                <el-input v-model="scope.row.matter"></el-input>
            </template>
          </el-table-column>
            <el-table-column align="center" label="净数量">
            <template slot-scope="scope">
                <el-input v-model="scope.row.amounts"></el-input>
            </template>
          </el-table-column>
               <el-table-column align="center" label="废品库">
            <template slot-scope="scope">
                <el-input v-model="scope.row.waste"></el-input>
            </template>
          </el-table-column>
               <el-table-column align="center" label="废品处理">
            <template slot-scope="scope">
                <el-input v-model="scope.row.salvaging"></el-input>
            </template>
          </el-table-column>
               <el-table-column align="center" label="仓库">
            <template slot-scope="scope">
                <el-input v-model="scope.row.storehouse"></el-input>
            </template>
          </el-table-column>
               <el-table-column align="center" label="工序">
            <template slot-scope="scope">
                <el-input v-model="scope.row.processes"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="生效日期" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.date"></el-input>            
            </template>
          </el-table-column>
            <el-table-column label="过期日期" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dates"></el-input>            
            </template>
          </el-table-column>
        </el-table> -->
        <el-table :data="item.rawlist" height="200">
          <el-table-column align="center" type="index" label="序号" prop="xuhao"></el-table-column>
          <el-table-column align="center" label=" 原料名称">
            <template slot-scope="scope">
        <el-input v-model="scope.row.rawname"></el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" label="原料料号">
            <template slot-scope="scope">
              <el-input v-model="scope.row.rawno"></el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" label="原料数量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="领料率">
            <template slot-scope="scope">
              <el-input v-model="scope.row.lingliaolv"></el-input>
            </template>
          </el-table-column>
    
        </el-table>
        </div>

   </div>
   </div>
      <div class="btn_bottom">
           <el-button type="primary" size="medium" @click="queDing">确定</el-button>
           <el-button type="info" size="medium" @click="quXiao">返回</el-button>
          </div>  

  </div>
  
</template>

<script>
import axios from "axios";
export default {
  
    data(){
      return{
       
        formInlines:{
  
      
        },
       
       
     tableData:[
         {
         xuhao:'1',
         No:'',
         matter:'',
         amounts:'',
         waste:'',
         salvaging:'',
         storehouse:'',
          processes:'',
          date:'',
          dates:''

     },
       {
                  xuhao:'2',
            No:'',
         matter:'',
         amounts:'',
         waste:'',
         salvaging:'',
         storehouse:'',
          processes:'',
          date:'',
          dates:''
    
     },
      

     ],
     datas:[]
     
      }

    },
    created() {
   this.Id=this.$route.query.id;
   this.No=this.$route.query.No;
   this.Xd=this.$route.query.Xd;
   this.getDetail()
  },
    methods:{
       getDetail() {

      axios("/apis/ProductManagement.asmx/Det_Product?index=30&jsondata=" + this.Id).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var list = JSON.parse(datas.string.__text);
              console.log(list);
          this.datas=list;
  console.log(this.datas)
              this.formInlines.xiadandate=this.Xd;
              this.formInlines.saleorderno=this.No;
              //  for(var i = 0; i < list.length; i++){
           
              // this.form.productname=list[i].productname;
              // this.form.productype=list[i].productype;
              // this.form.number=list[i].number;
              // this.form.guige=list[i].guige;
              //   this.tableData=list[i].rawlist

              //  }
              
        }
      )
        
      
       },
         Fh(){
          window.history.go(-1);
      },
        queDing(){
     window.history.go(-1);
   },
   quXiao(){
     window.history.go(-1);
   },
      
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.side_1{
    width:5px;
    height: 16px;
    background-color:$Header_color;
    margin-left: 10px;
    margin-top: 20px;
}
.add_1{
   margin-left: 20px;
  margin-top: -20px;
   float: left;
   font-size: 18px;
   font-weight: 400

}
.btn_fanhui{
    margin-top: -20px;
   margin-right: 20px;
    float:right;
}
.body{
  overflow: hidden;
  margin-bottom: 20px;
  margin-left: 10px;
  width: 98%;
    background-color: $white;
  display: inline-block;
    height: 800px;
  border: 1px solid $bordercolor;
    border-radius: 4px;
    margin-top: 20px;
}

.form_pro{

  overflow: hidden;
  font-weight: bold;
color:#333;

border-bottom: 1px solid $bordercolor;
width:95%;
margin-top: 30px;
margin-left: 30px;

}
.form_pro_1{

  overflow: hidden;
  font-weight: bold;
color:#333;

margin-top: 20px;
margin-left: 30px;

}

#table{
  margin-left: 5%;
  margin-top: 25px;
  width:90%;
}

.btn_bottom{
  margin-top: 30px;
  margin-left: 45%;
}

</style>
<style >
#table .el-table th{
  background:rgba(242, 242, 242, 1);
  border-right:none;
}
#table .el-table td{
   border-right:none;
}

.el-input__inner{
  width:80%
}
</style>